<template>
  <div class="contanier">
    <el-card>
      <el-form :model="params" label-width="120px">
        <el-form-item label="聘用形式:">
          <el-checkbox-group v-model="params.approvalsTypeChecks">
            <el-checkbox label="1">正式</el-checkbox>
            <el-checkbox label="2">非正式</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="员工状态:">
          <el-checkbox-group v-model="params.approvalsStateChecks">
            <el-checkbox label="1">在职</el-checkbox>
            <el-checkbox label="2">离职</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="部门:">
          <el-checkbox-group v-model="params.departmentChecks">
            <el-checkbox
              v-for="item in departmentList"
              :key="item.id"
              :label="item.id"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card class="salarylist">
      <el-table :data="salaryList.rows" style="width: 80%">
        <el-table-column prop="index" label="序号" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="mobile" label="手机" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column prop="formOfEmployment" label="聘用形式" />
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="timeOfEntry" label="入职时间" />
        <el-table-column prop="currentBasicSalary" label="工资基数" />
        <el-table-column prop="inServiceStatus" label="津贴方案" />
        <el-table-column v-slot="scope" label="操作" width="100">
          <template>
            <!-- <el-button type="text" size="small" @click="dialogTableVisible = true">调薪</el-button> -->
            <el-button type="text" size="small" @click="onSalary(scope.row.id) && dialogTableVisible">调薪</el-button>
            <el-button type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> -->

    <el-dialog title="调薪" :visible.sync="dialogTableVisible">
      <!-- 部门 -->
      <div class="wrapper">
        <div class="img"><img src="http://ihrm.itheima.net/static/img/img.0615818f.jpeg" alt=""></div>
        <div class="content">
          <p>
            <span> </span>
          </p>
          <p>
            <span>部门</span>
          </p>
          <p>
            <span>入职时间:</span>
            xxxx
          </p>
        </div>
      </div>
      <!-- 表单区域 -->
      <div class="form-container">
        <el-form :model="salaryIncreaseList" label-width="100px" class="demo-ruleForm">
          <el-form-item label="调整基本工资">
            <el-col :span="11">
              <el-input v-model="salaryIncreaseList.currentBasicSalary" :disabled="true" />
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="11">
              <el-input placeholder="请输入调整后基本工资" />
            </el-col>
          </el-form-item>
          <el-form-item label="调整岗位工资">
            <el-col :span="11">
              <el-input v-model="salaryIncreaseList.currentPostWage" :disabled="true" />
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="11">
              <el-input placeholder="请输入调整后岗位工资" />
            </el-col>
          </el-form-item>
          <el-form-item label="工资合计">
            <el-col :span="11">
              <el-input v-model="salaryIncreaseList.currentPostWage" :disabled="true" />
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="11">
              <el-input placeholder="0" :disabled="true" />
            </el-col>
          </el-form-item>
          <el-form-item label="调整幅度">
            <el-col :span="11">
              <el-input placeholder="-579" :disabled="true" />
            </el-col>
          </el-form-item>
          <div class="btn-container">
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
              <el-button>关闭</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Salary',
  data() {
    return {
      params: {
        approvalsTypeChecks: [],
        approvalsStateChecks: [],
        departmentChecks: []
      },
      currentPage: 1,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  // watch: {
  //   params: {
  //     deep: true,
  //     handler(newValue) {
  //       console.log(newValue)
  //     }
  //   }
  // },
  computed: {
    ...mapState('department', ['departmentList']),
    ...mapState('salary', ['salaryList']),
    ...mapState('salaryIncrease', ['salaryIncreaseList'])
  },
  methods: {
    ...mapActions('department', ['updateDepartmentList']),
    ...mapActions('salary', ['updateSalaryList']),
    ...mapActions('salaryIncrease', ['updateSalaryIncreaseList']),
    onSalary(userId) {
      this.dialogTableVisible = true
      this.updateSalaryIncreaseList(userId)
    }
  },

  created() {
    this.updateDepartmentList()
    this.updateSalaryList({
      ...this.params,
      page: this.currentPage
    })
  }
}
</script>

<style lang="scss" scoped>
.contanier{
  padding: 20px
}
.salarylist {
  margin-top: 10px
}
::v-deep .el-dialog__header{
  background-color: #66b1ff;
  padding: 10px;
  span,
  i {
    color: #fff;
    font-size: 14px
  }
}
::v-deep .el-dialog__headerbtn{
  top: 15px
}
.wrapper {
  display: flex;
  border-bottom: 1px solid #d2d2d2;
  padding: 0 0 16px 0;
  .img {
    margin-right: 16px;

    img {
      border: 1px solid #cccccc;
      border-radius: 50%;
      width: 100px;
      height: 100px
    }
  }
  .content>div:nth-child(1) {
    margin-bottom: 16px
  }
  .content {
    p {
      margin-left: 16px;
      height: 30px;
      line-height: 30px
      span {
        font-weight: 600;
        margin-right: 16px
      }
    }
  }
}
.form-container {
  margin-top: 16px
}
.line {
  padding: 0 8px;
  text-align: center
}
.btn-container {
  display: flex;
  justify-content: center
}

</style>
